<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>myProject</title>
    <script src="echarts.js"></script>
</head>
<body>
<div id="main" style="width: 1000px;height:600px;border:3px solid red"></div>
    <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
         title: {
            text: '标签人数分布',
            subtext: '190,633人'
        },
         dataset: {
            source: [
            ['percent','amount','product'],
            [0, 0,'活跃用户'],
            [0.06 ,91,'新用户'],
            [0.27,524,'连接活跃用户'],
            [3.43,6546,'回流用户'],
            [96.24,183472,'流失用户'],
            ]
        },

        tooltip: {
            trigger: 'axis',
                axisPointer: {
                type: 'shadow'},
       },

        grid: {
            left: '3%',
            right: '10%',
            bottom: '3%',
            containLabel: true
        },
        xAxis:{
                type: 'value',
                minInterval :1,
                splitNumber:5,
                axisLabel: {
                   formatter: '{value}%'
                   },
               boundaryGap : [ 0, 0.1 ],
               },

        yAxis: {type:'category'},
        series: [
            {
                type: 'bar',
                itemStyle:{
                normal:{
                    label:{
                    show:true,
                    position:'right',
                    formatter:'{@1}'+'人'+'{@0}'+'%',
                            }
                            }
                },
                encode: {
                x: 'percent',
                y: 'product'
                }
            },
        ]
    };
    myChart.setOption(option);
    </script>
</body>
</html>